<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网球机器人控制台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="{{ url_for('static', filename='lib/socket.io.min.js') }}"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>网球机器人控制台</h1>
            <div class="status-bar">
                <div class="status-item">
                    <span class="status-label">机器人:</span>
                    <span id="robot-status" class="status-value offline">离线</span>
                </div>
                <div class="status-item">
                    <span class="status-label">视觉系统:</span>
                    <span id="vision-status" class="status-value offline">离线</span>
                </div>
                <div class="status-item">
                    <span class="status-label">时间:</span>
                    <span id="current-time" class="status-value">--:--:--</span>
                </div>
            </div>
        </header>

        <main>
            <!-- 控制面板 -->
            <section class="control-panel">
                <div class="panel-header">
                    <h2>控制面板</h2>
                </div>
                
                <!-- 系统控制 -->
                <div class="control-group">
                    <h3>系统控制</h3>
                    <div class="button-group">
                        <button id="restart-service" class="btn btn-warning">重启服务</button>
                        <button id="toggle-robot" class="btn btn-success">启动机器人</button>
                        <button id="toggle-vision" class="btn btn-primary">启动视觉</button>
                        <button id="toggle-pickup" class="btn btn-secondary">开启拾取</button>
                    </div>
                    
                    <div class="button-group" id="pickup-control-buttons" style="display: none;">
                        <button id="emergency-stop" class="btn btn-danger">紧急停止</button>
                        <button id="restart-pickup" class="btn btn-info">重启拾取</button>
                    </div>
                </div>

                <!-- 拾取模式状态 -->
                <div class="control-group" id="pickup-status-group" style="display: none;">
                    <h3>拾取模式状态</h3>
                    <div class="pickup-status">
                        <div class="status-item">
                            <span class="status-label">拾取模式:</span>
                            <span id="pickup-mode-status" class="status-value offline">关闭</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">当前状态:</span>
                            <span id="current-state" class="status-value offline">空闲</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">水平距离:</span>
                            <span id="target-distance" class="status-value">--</span>
                            <span class="status-unit">px</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">球面积:</span>
                            <span id="ball-area" class="status-value">--</span>
                            <span class="status-unit">px²</span>
                        </div>
                    </div>
                </div>

                <!-- 键盘控制说明 -->
                <div class="control-group">
                    <h3 class="collapsible-header" onclick="toggleKeyboardHelp()">
                        键盘控制 <span id="keyboard-toggle" class="toggle-icon">▼</span>
                    </h3>
                    <div id="keyboard-help-content" class="keyboard-help-text collapsed">
                        <p><strong>Q</strong> - 逆时针旋转</p>
                        <p><strong>W</strong> - 前进</p>
                        <p><strong>E</strong> - 顺时针旋转</p>
                        <p><strong>A</strong> - 左平移</p>
                        <p><strong>S</strong> - 后退</p>
                        <p><strong>D</strong> - 右平移</p>
                        <p><strong>C</strong> - 加速</p>
                        <p><strong>Z</strong> - 减速</p>
                        <p><strong>空格</strong> - 停止</p>
                        <p><strong>P</strong> - 截取原始图像</p>
                        <p><strong>O</strong> - 截取检测画面</p>
                    </div>
                </div>

                <!-- 当前速度显示 -->
                <div class="control-group">
                    <h3>当前速度</h3>
                    <div class="velocity-display">
                        <div class="velocity-item">
                            <span class="velocity-label">速度级别:</span>
                            <span id="speed-multiplier" class="velocity-value">1.0</span>
                            <span class="velocity-unit">x</span>
                        </div>
                        <div class="velocity-item">
                            <span class="velocity-label">线速度X:</span>
                            <span id="velocity-x" class="velocity-value">0.00</span>
                            <span class="velocity-unit">m/s</span>
                        </div>
                        <div class="velocity-item">
                            <span class="velocity-label">线速度Y:</span>
                            <span id="velocity-y" class="velocity-value">0.00</span>
                            <span class="velocity-unit">m/s</span>
                        </div>
                        <div class="velocity-item">
                            <span class="velocity-label">角速度Z:</span>
                            <span id="velocity-z" class="velocity-value">0.00</span>
                            <span class="velocity-unit">rad/s</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 视频显示区域 -->
            <section class="video-panel">
                <div class="panel-header">
                    <h2>摄像头视图</h2>
                    <div class="video-stats">
                        <span id="detection-count">检测: 0</span>
                        <span id="fps-display">FPS: 0.0</span>
                        <span id="detection-time">耗时: 0ms</span>
                    </div>
                </div>
                <div class="video-container">
                    <img id="video-stream" src="/video_feed" alt="摄像头视频流">
                    <div class="video-overlay" id="video-overlay">
                        <div class="loading-spinner">
                            <div class="spinner"></div>
                            <p>等待视频流...</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 系统监控 -->
            <section class="monitor-panel">
                <div class="panel-header">
                    <h2>系统监控</h2>
                </div>
                
                <div class="monitor-grid">
                    <!-- CPU使用率 -->
                    <div class="monitor-item">
                        <h3>CPU使用率</h3>
                        <div class="progress-container">
                            <div class="progress-bar">
                                <div id="cpu-progress" class="progress-fill" style="width: 0%"></div>
                            </div>
                            <span id="cpu-percent" class="progress-text">0%</span>
                        </div>
                    </div>

                    <!-- 内存使用率 -->
                    <div class="monitor-item">
                        <h3>内存使用率</h3>
                        <div class="progress-container">
                            <div class="progress-bar">
                                <div id="memory-progress" class="progress-fill" style="width: 0%"></div>
                            </div>
                            <span id="memory-percent" class="progress-text">0%</span>
                        </div>
                        <div class="memory-details">
                            <span id="memory-used">0.0</span> GB / <span id="memory-total">0.0</span> GB
                        </div>
                    </div>

                    <!-- 电池电压 -->
                    <div class="monitor-item">
                        <h3>电池电压</h3>
                        <div class="voltage-display">
                            <span id="battery-voltage" class="voltage-value">0.00</span>
                            <span class="voltage-unit">V</span>
                        </div>
                        <div id="voltage-status" class="voltage-status">正常</div>
                    </div>

                    <!-- 机器人状态 -->
                    <div class="monitor-item">
                        <h3>机器人位置</h3>
                        <div class="position-display">
                            <div class="position-item">
                                <span class="position-label">X:</span>
                                <span id="position-x" class="position-value">0.00</span>
                                <span class="position-unit">m</span>
                            </div>
                            <div class="position-item">
                                <span class="position-label">Y:</span>
                                <span id="position-y" class="position-value">0.00</span>
                                <span class="position-unit">m</span>
                            </div>
                            <div class="position-item">
                                <span class="position-label">Z:</span>
                                <span id="position-angle" class="position-value">0.00</span>
                                <span class="position-unit">°</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 消息提示区域 -->
        <div id="message-container" class="message-container"></div>
    </div>

    <!-- 加载所有模块，按依赖顺序 -->
    <script src="{{ url_for('static', filename='js/modules/Utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/modules/SocketManager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/modules/RobotControl.js') }}"></script>
    <script src="{{ url_for('static', filename='js/modules/VisionControl.js') }}"></script>
    <script src="{{ url_for('static', filename='js/modules/PickupControl.js') }}"></script>
    <script src="{{ url_for('static', filename='js/modules/UIManager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/modules/KeyboardController.js') }}"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
